{% extends 'base.html' %}
{% block title %}{{ video.name }} - 慕学在线网{% endblock %}
{% load staticfiles %}

{% block custom_css %}
  <link rel="stylesheet" href="{%  static 'css/muke/base.css' %}"/>
  <link rel="stylesheet" href="{%  static 'css/muke/common-less.css' %}"/>
  <link rel="stylesheet" href="{%  static 'css/muke/course/learn-less.css' %}"/>
  <link rel="stylesheet" href="{%  static 'css/aui.css' %}"/>
  <link rel="stylesheet" href="{%  static 'css/mooc.css' %}"/>
  <link rel="stylesheet" href="{%  static 'css/muke/course/common-less.css' %}">
  <link rel="stylesheet" href="{%  static 'css/video-js.min.css' %}">
  <link rel="stylesheet" href="{%  static 'js/video.min.js' %}">
  <link rel="stylesheet" href="{%  static 'js/videojs-ie8.min.js' %}">



  <style>
    .video-js .vjs-big-play-button {
      top: 50%;
      left: 50%;
    }
  </style>
{% endblock %}

{% block custom_js %}
<script src="{% static 'js/video.min.js' %}"></script>
{% endblock %}

{% block crumbs %}
    <section>
        <div class="wp">
            <ul class="crumbs">
                <li><a href="{% url 'index' %}">首页</a>></li>
                <li><a href="{% url 'courses:list' %}">公开课</a> > </li>
                <li><a href="{% url 'courses:detail' course.id %}">{{ course.name }}</a> > </li>
                <li>{{ video.name }}</li>
            </ul>
        </div>
    </section>
{% endblock %}

{% block body %}
  <div id="main">
{#视频播放#}
  <div style=" width:950px;height:670px; margin-left: 50px">
    <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="1200" height="600"
           poster="{{ MEDIA_URL }}{{ course.image }}"
           data-setup="{}">
      <source src="{{ MEDIA_URL }}{{ video.url }}" type='video/mp4'>

    </video>
  </div>

  <div class="course-info-main clearfix w has-progress">

    <div class="info-bar clearfix">
      <div class="content-wrap clearfix">
        <div class="content">
          <div class="mod-tab-menu">
            <ul class="course-menu clearfix">
                <li><a class="ui-tabs-active active" id="learnOn"><span>章节</span></a></li>
                <li><a id="commentOn" class="" href="{% url 'courses:comment' course.id %}"><span>评论</span></a></li>
            </ul>
          </div>
          <div id="notice" class="clearfix">
                    <div class="l"> <strong>课程公告:</strong> <a  href="javascript:void(0)">{{ course.notice }}</a> </div>
          </div>

          <div class="mod-chapters">
{#章节信息#}
                    {% for lession in lessions %}
                    <div class="chapter chapter-active" >
                        <h3>
                            <strong><i class="state-expand"></i>{{ lession.name }}</strong>
                        </h3>
                        <ul class="video">
                            {% for video in lession.video_set.all %}
                                <li>
                                    <a target="_blank" href='{% url 'courses:play' video.id %}' class="J-media-item studyvideo">{{ video.name }}
                                        <i class="study-state"></i>
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endfor %}
                </div>
            </div>
{#资料下载#}
            <div class="aside r">
                <div class="bd">

                    <div class="box mb40">
                        <h4>资料下载</h4>

                        <ul class="downlist">
                        {% for resource in resources %}
                            <li>
                                <span ><i class="aui-iconfont aui-icon-file"></i>&nbsp;&nbsp;{{ resource.name }}</span>
                                <a href="{{ MEDIA_URL }}{{ resource.download }}" class="downcode" target="_blank" download="" data-id="274" title="">下载</a>
                            </li>
                        {% endfor %}
                        </ul>
                    </div>
{#教师提示#}
                    <div class="box mb40">
                        <h4>教师提示</h4>
                        <div class="teacher-info">
                            <a href="{% url 'org:teacher_detail' course.teacher.id %}" target="_blank">
                                <img src='{{ MEDIA_URL }}{{ course.teacher.image }}' width='80' height='80' />
                            </a>
                        <span class="tit">
                          <a href="{% url 'org:teacher_detail' course.teacher.id %}" target="_blank">{{ course.teacher.name }}</a>
                        </span>
                            <span class="job">{{ course.teacher.work_position }}</span>
                        </div>
                        <div class="course-info-tip">
                            <dl class="first">
                                <dt>课程须知</dt>
                                <dd class="autowrap">{{ course.before_know }}</dd>
                            </dl>
                            <dl>
                                <dt>老师告诉你能学到什么？</dt>
                                <dd class="autowrap">{{ course.teacher_tell }}</dd>
                            </dl>
                        </div>
                    </div>

                    <div class="cp-other-learned  js-comp-tabs">
                        <div class="cp-header clearfix">
                            <h2 class="cp-tit l">该课的同学还学过</h2>
                        </div>
                        <div class="cp-body">
                            <div class="cp-tab-pannel js-comp-tab-pannel" data-pannel="course" style="display: block">
                                <!-- img 200 x 112 -->
                                <ul class="other-list">
                                    {% for course_list in course_lists %}
                                        <li class="curr">
                                            <a href="course-detail.html" target="_blank">
                                                <img src="{{ MEDIA_URL }}{{ course_list.image }}" alt="{{ course_list.name }}">
                                                <span class="name autowrap">{{ course_list.name }}</span>
                                            </a>
                                        </li>
                                    {% endfor %}
                                </ul>
                            </div>

                        </div>
                    </div>

                </div>
            </div>

        </div>
        <div class="clear"></div>

    </div>
  </div>
</div>
{% endblock %}
